<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>观看历史</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/main.css" />
    <style>
        body {
            /*background-color: #D7D6D5;*/
            background-color: #fff;
        }

        .back1 {
            width: 15px !important;
            height: 24px !important;
            margin-top: 17px;
            margin-left: 25px;
        }

        .test {
            position: relative;
        }

        .lists {
            padding: 8px 15px 15px 15px;
            background-color: #fff;
            margin-bottom: 2px;
        }

        .img_picture {
            width: 100%;
            height: 80px;
            display: inline-block;
            vertical-align: middle;
            border-radius: 8px;
        }

        .content1 {
            width: 52%;
            float: left;
            height: 88px;
            padding-left: 12px;
        }

        .content_title {
            color: #000;
            font-size: 18px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .content_wenzi {
            font-size: 14px;
            padding-top: 8px;
            color: #A7A7A7;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .shuoming {
            font-size: 14px;
            position: absolute;
            bottom: 0px;
            color: #A7A7A7;
        }

        .right {
            right: 0px;
        }

        .aui-title {
            padding-top: 8px;
        }

        .li {
            position: absolute;
            width: 30px;
            height: 14px;
            font-size: 13px;
            top: 23px;
            right: 32px;
        }

        #aui-header {
            padding: 10px 0px;
            font-size: 19px;
        }

        .footer {
            position: fixed;
            bottom: 0px;
            height: 46px;
            line-height: 46px;
            width: 100%;
            background-color: #fff;
            border-top: 2px solid #d9d8d7;
            font-size: 17px;
            z-index:10;
        }

        .child {
            width: 60%;
            float: left;
            text-align: center;
        }

        .child1 {
            width: 40%;
            float: left;
            text-align: center;
            background-color: #D9D8D7;
        }

        .childact {
            color: #EA5718;
        }

        .radio {
            float: left;
            width: 19px;
            height: 19px;
            margin-left: 10px;
            margin-right: 25px;
            margin-top: 35px;
        }

        .all {
            width: 19px;
            height: 19px;
            position: fixed;
            left: 25px;
            bottom: 13px;
        }

        .segmenting {
            position: absolute;
            width: 1px;
            height: 34px;
            background: url(../image/split.png) no-repeat;
            left: 50%;
            top: 5px;
        }

        .daoqi {
            color: #fff;
            background-color: #C3C3C3;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            text-align: center;
            position: absolute;
            margin-top: 30px;
            width: 100%;
        }

        .jindutiao {
            position: absolute;
            bottom: -6px;
            left: 0px;
            width: 46%;
        }

        .aui-progress-bar {
            position: relative;
            background-color: #EA5413;
        }

        .aui-progress {
            overflow: inherit;
        }

        .aui-progress-bar:after {
            content: "";
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: red;
            right: 0px;
            top: -4px;
            border: 1px solid red;
            border-radius: 50%;
            background-color: #fff;
        }
        /*kong*/

        .box {
            height: 7px;
            background: #c3c3c3;
            margin-top: 11px;
        }

        .cat {
            width: 200px;
            height: 200px;
            left: 50%;
            top: 50%;
            position: absolute;
            margin-left: -100px;
            margin-top: -100px;
            text-align: center;
        }

        .top_login {
            height: 28px;
            line-height: 28px;
            background-color: #FFAD20;
            font-size: 13px;
            padding-left: 26px;
            padding-right: 20px;
            margin-top: 7px;
        }

        .jiazaigif {
            width: 20px;
            height: 20px;
            line-height: 24px;
            display: inline;
            /*float: left;*/
        }

        .outcat {
            width: 130px;
            height: auto;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>

<body>

    <div id="vm" v-cloak>

        <div class="tablist" v-if="iskong">
            <div class="cat">
                <img src="./../image/few/standcat.png" alt="" class="outcat">
                <div class="zi">
                    目前没有观看历史
                </div>
            </div>
        </div>

        <div class="tablist" v-bind:class="{collectlistul: isActive}" v-else>
            <div v-for="(item,key) in allcollectlist">
                <div v-bind:class="{collectlist: isActive}">
                    <div class="choise">
                        <img src="../image/48.png" alt="" v-if="item.isweixuan" class="radio" v-on:click="cancelcollect(item)">
                        <img src="../image/114.png" alt="" v-else class="radio" v-on:click="cancelcollect(item)">
                    </div>
                    <div style="position:relative" @click="Openjieshao(item)">
                        <div class="lists">
                            <div style="float:left;  width: 46%; position:relative">
                                <!-- <span class="videotype" :class="{videotypedaka:item.video_type==3,videotypemianfei:item.video_type==1}">{{videotype(item.video_type)}}</span> -->
                                <img v-bind:src=item.img alt="" class="img_picture">
                            </div>
                            <div class="content1 test">
                                <p class="content_title">{{item.video_name}}</p>
                                <p class="content_wenzi">{{item.video_introduce_small}}</p>
                                <div class="shuoming">{{item.addtime}}</div>
                            </div>
                            <div class="aui-clearfix"></div>
                            <div style="position:absolute;bottom:28px;font-size:10px;margin-left:5px;" v-show="uid&&item.watch_time2">{{settime(item.watch_time)}}/{{settime(item.time)}}</div>
                        </div>
                        <div class="jindutiao" v-show="uid">
                            <div class="aui-content-padded">
                                <div class="aui-progress aui-progress-xxs">
                                    <div class="aui-progress-bar"   :style="'width:'+ item.watch_time2*100+'%;'"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="text-align:center;line-height:24px;" v-if="isjiazaiflag">
                <img class="jiazaigif" src="../image/loading_more.gif" alt=""> 加载更多
            </div>

        </div>




        <footer class="footer" v-if="isActive && !iskong" id="footer">
            <div class="child" v-if="isweixuanflag" @click="allchoice()">
                <img src="../image/48.png" alt="" class="all"> 全&nbsp;&nbsp;选
            </div>
            <div class="child" v-else @click="allcancelchoice()">
                <img src="../image/114.png" alt="" class="all"> 全&nbsp;&nbsp;选
            </div>
            <div class="child1" v-bind:class="{childact: ishavecancle}" v-if="isbukedianji">
                删除({{collectnum}})
            </div>
            <div class="child1" v-bind:class="{childact: ishavecancle}" v-else v-on:click="delcollbox()">
                删除({{collectnum}})
            </div>
        </footer>

        <div class="mask mask3  hide">
            <div class="bombbox">
                <div class="bombbox-title">删除所选视频</div>
                <div class="aui-row bombbox-foot">
                    <div class="segmenting"></div>
                    <div class="aui-col-xs-6 aui-font-size-15 cancel">取消</div>
                    <div class="aui-col-xs-6 aui-font-size-15 sure" v-on:click="deletecollect()">确定</div>
                </div>
            </div>
        </div>


    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/rest.js"></script>
<script type="text/javascript" src="../script/vue.2.5.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/faskclick.js"></script>
<script type="text/javascript">
    var uid, session, histortlist;
    // $api.rmStorage('histortlist')
    if ($api.getStorage('histortlist')) {
        histortlist = $api.getStorage('histortlist');
        // histortlist = $api.getStorage('histortlist').reverse();
        console.log('dao-----------------------------------------------------------------------------------------------------')
    } else {
        histortlist = [];
    }
    var vm = new Vue({
        el: '#vm',
        data: {
            islogin: false,
            iskong: false,
            isActive: false,
            allcollectlist: [],
            isweixuan: true,
            collectnum: 0,
            deletecollectid: [],
            isweixuanflag: true,
            ishavecancle: false,
            page: 1,
            videodetial: {
                zan_count: 12,
                video_play_number_2: 19,
                video_name: '',
                video: ''
            },
            delehistorylist: [],
            isquanxuanflag: false,
            isjiazaiflag: false,
            nomore: false,
            uid:false,
            isbukedianji:true
        },
        created: function() {
            var _this = this;
            apiready = function() {
                uid = $api.getStorage('uid');
                _this.uid = uid;
                session = $api.getStorage('session');
                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }
                if (uid) {
                    _this.islogin = true;
                } else {
                    _this.islogin = false;
                }
                _this.init();
                api.parseTapmode();
                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }

                api.addEventListener({
                    name: 'editwatchhistory'
                }, function(ret, err) {
                    if (ret) {
                        if (ret.value.edit == 'bianji') {
                            _this.isActive = true
                        } else {
                            _this.isActive = false
                        }
                    }
                });

                api.addEventListener({
                    name: 'watchhistory'
                }, function(ret, err){
                    var shuzu;
                    _this.allcollectlist.map(function(res,index) {
                        if (res.id==ret.value.video_id) {
                          res.watch_time = ret.value.watch_time
                          res.watch_time2 = ret.value.watch_time/res.time
                            shuzu =res;
                            console.log(JSON.stringify(shuzu))
                            _this.allcollectlist.splice(index,1)
                        }
                    })
                    _this.allcollectlist.unshift(shuzu)
                });
            }
        },
        methods: {
            init: function() {
                var _this = this;
                if (uid) {
                    api.addEventListener({
                        name: 'scrolltobottom',
                        extra: {
                            threshold: 80 //设置距离底部多少距离时触发，默认值为0，数字类型
                        }
                    }, function(ret, err) {
                        if (!_this.nomore) {
                            if (_this.iskong) {
                                _this.page = _this.page
                            } else {
                                _this.isjiazaiflag = true;
                                setTimeout(function() {
                                    _this.page = _this.page + 1;
                                    _this.isjiazaiflag = false;
                                    _this.getVideoUserHistory();
                                }, 5000)
                            }
                        }

                    });
                }

                _this.getVideoUserHistory();
            },
            Openjieshao: function(item) {
                // console.log(JSON.stringify(item))
                var _this = this;
                if (uid) {
                    var data1 = {
                        video_id: item.id,
                        uid: uid
                    }
                } else {
                    var data1 = {
                        video_id: item.id,
                        uid: ''
                    }
                }
                new rest().get('getDetail').datae(data1).success(function(res) {
                    console.log(JSON.stringify(res))
                    if (res.flag == 1) {
                        _this.videodetial = res.msg;
                        apicmmon.openwin('videodetail_win', 'VIP/videodeail.html', {
                            videoid: item.id,watch:true
                        })
                    } else {
                        api.toast({
                            msg: '视频不存在',
                            duration: 2000,
                            location: 'middle'
                        });
                    }
                }).error(function(err) {
                    console.log(JSON.stringify(err))
                }).run()

            },
            videotype: function(res) {
                if (res == 2) {
                    return 'VIP'
                } else if (res == 3) {
                    return '大咖'
                } else {
                    return '免费'
                }
            },
            getVideoUserHistory() {
                var _this = this;
                if (uid) {
                    new rest().get('getVideoUserHistory').datae({
                        uid: uid,
                        page: _this.page,
                        psize: 20
                    }).success(function(res) {
                        if (res.flag == 1) {
                            console.log(JSON.stringify(res))
                            if (res.msg.length == 0) {
                                if (_this.page == 1) {
                                    _this.iskong = true;
                                } else {
                                    _this.iskong = false;
                                    _this.page = _this.page;
                                    _this.isjiazaiflag = false;
                                    _this.nomore = true;
                                    api.toast({
                                        msg: '没有更多了',
                                        duration: 2000,
                                        location: 'middle'
                                    });
                                }
                            } else {
                                for (i = 0; i < res.msg.length; i++) {
                                    res.msg[i]['isweixuan'] = true;
                                    if (res.msg[i]['watch_time']!=="null") {
                                      res.msg[i]['watch_time2'] = res.msg[i]['watch_time']/res.msg[i]['time']
                                    }else {
                                      res.msg[i]['watch_time2'] = 0
                                    }
                                }
                                // alert(JSON.stringify(res.msg))
                                // _this.page = _this.page + 1;
                                _this.iskong = false;
                                setTimeout(function() {
                                    _this.allcollectlist = _this.allcollectlist.concat(res.msg);
                                    _this.isjiazaiflag = false;
                                }, 1000)


                            }
                        }
                        // console.log(JSON.stringify(res))
                    }).error(function(err) {
                        console.log(JSON.stringify(err))
                    }).run()
                } else {
                    _this.allcollectlist = histortlist;
                    if (_this.allcollectlist.length == 0) {
                        _this.iskong = true;
                    } else {

                        _this.iskong = false;
                    }


                    if(_this.allcollectlist){
                      _this.allcollectlist = []
                          for (var i = 0; i < histortlist.length; i++) {
                            data2 = {
                                video_id: histortlist[i].id,
                                uid: ''
                            }
                            new rest().get('getDetail').datae(data2).success(function(res) {
                                console.log(JSON.stringify(res))
                                if (res.flag == 1) {
                                  _this.ishistorylistflag = true;
                                  res.msg['isweixuan']=true;
                                  _this.allcollectlist.push(res.msg)
                                }
                            }).error(function(err) {
                                console.log(JSON.stringify(err))
                            }).run()
                          }

                    }



                    // var data2, isxiajia;
                    // for (var i = 0; i < histortlist.length; i++) {
                    //     data2 = {
                    //         video_id: histortlist[i].id,
                    //         uid: ''
                    //     }
                    //     new rest().get('getDetail').datae(data2).success(function(res) {
                    //             if (res.flag == 1) {
                    //               _this.allcollectlist.push(res.msg)
                    //               if (_this.allcollectlist.length == 0) {
                    //                   _this.iskong = true;
                    //               } else {
                    //                 for (i = 0; i < _this.allcollectlist.length; i++) {
                    //                     _this.allcollectlist[i]['isweixuan'] = true;
                    //                 }
                    //                   _this.iskong = false;
                    //               }
                    //             }
                    //         }).error(function(err) {
                    //             console.log(JSON.stringify(err))
                    //         }).run()
                    // }

                }
            },
            cancelcollect: function(zixun) {
                var _this = this;
                // 判断是否选中，将选中的资讯id加入数组中，一起取消收藏

                if (zixun.isweixuan) {
                    zixun.isweixuan = false;
                    _this.collectnum = _this.collectnum + 1;
                    _this.deletecollectid.push(zixun.id)
                    _this.ishavecancle = true;
                    // 全选
                    if (_this.collectnum == _this.allcollectlist.length) {
                        _this.isweixuanflag = false;
                        _this.isquanxuanflag = true;
                    }
                    if (!uid) {
                        _this.delehistorylist.push(zixun)
                    }
                    _this.isbukedianji=false;

                    // alert(JSON.stringify(_this.delehistorylist))

                } else {
                    zixun.isweixuan = true;
                    _this.collectnum = _this.collectnum - 1;
                    if (_this.collectnum <= 0) {
                        _this.collectnum = 0;
                        _this.ishavecancle = false;
                        _this.isweixuanflag = true;
                        _this.isbukedianji=true;
                    } else {
                        _this.ishavecancle = true;
                        _this.isbukedianji=false;
                    }
                    _this.isquanxuanflag = false;
                    var index = _this.deletecollectid.indexOf(zixun.id);
                    if (index > -1) {
                        _this.deletecollectid.splice(index, 1);
                    }

                    if (!uid) {
                        var index = _this.delehistorylist.indexOf(zixun);
                        if (index > -1) {
                            _this.delehistorylist.splice(index, 1);
                        }
                    }

                }

            },
            msginput() {
                this.msg = this.msg.substr(0, 4);
            },
            delcollbox: function() {
                var _this = this;
                if (_this.deletecollectid.length != 0) {
                    $('.mask3').removeClass('hide');
                    api.sendEvent({
                        name: 'clickcancelhistory',
                    });
                } else {
                    api.toast({
                        msg: '请选择要删除的资讯',
                        duration: 2000,
                        location: 'middle'
                    });

                }
            },
            deletecollect: function() {
                var _this = this;
                if (uid) {
                    for (i = 0; i < _this.deletecollectid.length; i++) {
                        new rest().get('delVideoUserHistory').datae({
                            video_id: _this.deletecollectid[i],
                            _uid: uid,
                            session: session
                        }).success(function(res) {
                            if (res.flag == 1) {
                                $('.mask3').addClass('hide');
                                api.sendEvent({
                                    name: 'clickcancelhistory1',
                                });
                                _this.page = 1;
                                _this.allcollectlist = [];
                                _this.getVideoUserHistory();
                                // _this.isActive = false;
                                _this.collectnum = 0;
                                api.sendEvent({
                                    name: 'delevideohistory',
                                });
                            }
                        }).error(function(err) {
                            console.log(JSON.stringify(err))
                        }).run()
                    }
                } else {
                    _this.isActive = false;
                    _this.collectnum = 0;
                    $('.mask3').addClass('hide');
                    if (_this.isquanxuanflag) {
                        _this.allcollectlist = [];
                        _this.iskong = true;
                    } else {
                        for (var j = 0; j < _this.delehistorylist.length; j++) {
                            var index = _this.allcollectlist.indexOf(_this.delehistorylist[j]);
                            if (index > -1) {
                                _this.allcollectlist.splice(index, 1);
                            }
                        }
                    }
                    $api.setStorage('histortlist', _this.allcollectlist)
                    api.sendEvent({
                        name: 'delevideohistory',
                        extra: {
                            histortlist: $api.getStorage('histortlist')
                        }
                    });
                    api.sendEvent({
                        name: 'clickcancelhistory1',
                    });
                }
            },
            allchoice: function() {
                var _this = this;
                _this.isweixuanflag = false;
                for (i = 0; i < _this.allcollectlist.length; i++) {
                    _this.allcollectlist[i]['isweixuan'] = false;
                    _this.deletecollectid.push(_this.allcollectlist[i].id)
                }
                _this.collectnum = _this.allcollectlist.length;
                _this.ishavecancle = true;
                _this.isquanxuanflag = true;
                _this.isbukedianji=false;

            },
            allcancelchoice: function() {
                var _this = this;
                _this.isweixuanflag = true;
                for (i = 0; i < _this.allcollectlist.length; i++) {
                    _this.allcollectlist[i]['isweixuan'] = true;
                }
                _this.deletecollectid = [];
                _this.collectnum = 0;
                _this.ishavecancle = false;
                _this.isquanxuanflag = false;
                _this.isbukedianji=true;

            },
            settime:function(ret) {
              // console.log(ret)
              if (ret=='') {
                return 0
              }
              var time = parseFloat(ret) / 1000;   //先将毫秒转化成秒
                if (null != time && "" != time) {
                    if (time > 60 && time < 60 * 60) {
                        if (parseInt(time / 60.0)<10) {
                          time = '0'+parseInt(time / 60.0) + ":" + parseInt((parseFloat(time / 60.0) -
                              parseInt(time / 60.0)) * 60) ;
                        }else{
                          time =parseInt(time / 60.0) + ":" + parseInt((parseFloat(time / 60.0) -
                              parseInt(time / 60.0)) * 60) ;
                        }

                    }else if (time >= 60 * 60 && time < 60 * 60 * 24) {
                        time = parseInt(time / 3600.0) + ":" + parseInt((parseFloat(time / 3600.0) -
                            parseInt(time / 3600.0)) * 60) + ":" +
                            parseInt((parseFloat((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60) -
                            parseInt((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60)) * 60) ;
                          // console.log(time+'999')
                        }else if (time <60 && time >10 ) {
                              time = '00'+":"+parseInt(time)
                              // console.log(time+'999')
                        }else if (time <10) {
                              time = '00'+":"+'0'+parseInt(time)
                              // console.log(time)
                        }else {
                            time = parseInt(time) ;
                        }
                    // console.log(time)

                }
                return time;
            }
        }
    })

    function loginwin() {
        api.openFrame({
            name: 'login_introduction',
            url: './myself/login_introduction.html',
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            },
            bounces: false,
            bgColor: 'rgba(0,0,0,0.7)',
            vScrollBarEnabled: true,
            hScrollBarEnabled: true
        });
    }
    $('.cancel').on('click', function() {
        $('.mask').addClass('hide');
        api.sendEvent({
            name: 'clickcancelhistory1',
        });
    })
</script>

</html>
